<template>
  <div class="notice-container">
    <el-card class="box-card">
      <div slot="header">
        <span>实时通知</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible2 = true" v-if="$store.state.userInfo.role === 1">发布通知</el-button>
        <el-button style="float: right; padding: 3px 0; margin-right: 30px" type="text" @click="dialogVisible = true">历史记录</el-button>
      </div>
      <el-empty description="暂无任何通知" v-if="notices.length === 0"></el-empty>
      <div class="text" v-else>
        {{ notices[notices.length - 1].content }}
      </div>
    </el-card>

    <el-dialog title="历史记录" :visible.sync="dialogVisible" width="40%">
      <div class="content-list">
        <div class="content-item" v-for="item in notices" :key="item.id">
          <div class="content">{{ item.content }}</div>
          <div class="user">
            <div class="usernmae">{{ item.username }}</div>
            <div class="pubtime">{{ item.pubtime | dateFormat }}</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="发布通知" :visible.sync="dialogVisible2" width="40%" @close="() => this.$refs.form.resetFields()">
      <el-form :model="form" label-width="80px" ref="form">
        <el-form-item label="通知信息">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="pub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: [],
      dialogVisible: false,
      dialogVisible2: false,
      form: {
        content: '',
      },
    }
  },
  created() {
    this.getnotices()
  },
  methods: {
    async getnotices() {
      const { data: res } = await this.$http.get('/api/notices/getnotices')
      if(res.status === 1) return this.$message(res.message)
      this.notices = res.data
    },
    async pub() {
      if(this.form.content === '') return this.$message.error('不能为空')
      const { data: res } = await this.$http.post('/api/notices/pubnotice', this.form)
      if(res.status === 1) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getnotices()
      this.dialogVisible2 = false
    },
  },
  filters: {
    dateFormat(str) {
      var dt = new Date(str)
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()
      var h = dt.getHours()
      var mm = dt.getMinutes()
      var s = dt.getSeconds()
      return `${y}-${m}-${d} ${h}:${mm}:${s}`
    },
  },
}
</script>

<style lang="less">
.content-list {
  .content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #ccc;
    .user {
      display: flex;
      align-self: flex-end;
    }
  }
}
</style>
